<html>
<head><title>五子棋</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: initial;
        }

        li {
            margin-top: 10px;
            line-height: 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid #aa3366;
            font-size: 14px;
            text-indent: 10px;
        }

        /*li:nth-child(2n){*/
        /*    text-align: right;*/
        /*}*/
        table {
            margin: 10px auto;
        }

        #qipan td {
            border: 1px solid #151515;
            height: 42px;
            width: 40px;
            background: burlywood;
            background-size: 90% 90%;
            background-position: center center;
            background-repeat: no-repeat;
        }

        #content {
            background-color: #adbfd9;
        }

        #log {
            width: 100%;
            height: 580px;
            overflow: hidden;
            padding: 10px;
            box-sizing: border-box;
            background: burlywood;
        }

        #player {
            width: 100%;
            height: 50px;
            overflow: hidden;
            padding: 10px;
            box-sizing: border-box;
            background: #c93756;
            text-align: center;
        }

        #palyerA, palyerB {
            line-height: 50px;
            width: 150px;
            max-width: 150px;
            overflow: hidden;
            float: left
        }

        #form {
            display: flex;
            padding: 20px;
        }

        #form input {
            background: #fcfcfc;
            /* border: 1px solid #001b80; */
            height: 40px;
            line-height: 40px;
            width: 555px;
            border: 1px solid #1e64c9;
            text-indent: 20px;
            color: #000;
            outline: none;
            font-size: 14px;
        }

        button {
            flex: 1;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            padding: 0 20px;
            background: linear-gradient(0deg, #ffcc22 0%, #40c1ff 100%);
            font-size: 14px;
            border: none;
        }

        #seat, #changeName {
            float: left;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            padding: 0 20px;
            background: linear-gradient(0deg, #0f9c22 0%, #0cff99 100%);
            font-size: 14px;
            border: none;
            margin: 0 10px;
        }

        #change input {
            background: #fcfcfc;
            /* border: 1px solid #001b80; */
            height: 40px;
            line-height: 40px;
            width: 90px;
            border: 1px solid #1e64c9;
            text-indent: 5px;
            color: #000;
            outline: none;
            font-size: 14px;
        }
    </style>
</head>

<body>
<!--定义棋盘-->
<table cellspacing="0" cellpadding="0" id="content">
    <tr>
        <td>
            <table cellspacing="0" cellpadding="0" id="qipan">

            </table>
        </td>
        <td style="width:300px;">
            <div id="player">
                <div id="palyerA" onclick="seat(1)"><img src="./img/playA.png"><span>点击加入</span></div>
                <div id="palyerB" onclick="seat(2)"><img src="./img/playB.png"><span>点击加入</span></div>
            </div>
            <div id="log"></div>
        </td>

    </tr>
    <tr>
        <td>
            <form id="form">
                <input type="text" id="msg" size="64"/>
                <button type="submit">Send</button>
            </form>
        </td>
        <td id="change">
            <div id="changeName">改名</div>
            <input type="text" id="name" size="10"/>
        </td>
    </tr>
</table>
</body>

<script>
    //开始处理websocket
    var conn;
    var msg = document.getElementById("msg");
    var log = document.getElementById("log");

    var searchParams = new URLSearchParams(window.location.search);
    username = searchParams.get('username');
    room = searchParams.get('room');
    console.log(searchParams.get('username'));
    console.log(searchParams.get('room'));


    ///留言板
    function appendLog(item) {
        var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
        log.appendChild(item);
        if (doScroll) {
            log.scrollTop = log.scrollHeight - log.clientHeight;
        }
    }

    //留言方法
    document.getElementById("form").onsubmit = function () {
        if (!conn) {
            return false;
        }
        if (!msg.value) {
            return false;
        }
        console.log(msg)
        var messageObj = {message: msg.value}
        conn.send("message|" + JSON.stringify(messageObj));
        msg.value = "";
        return false;
    };
    //改名方法
    document.getElementById("changeName").onclick = function () {
        if (!conn) {
            return false;
        }
        var name = document.getElementById("name");
        if (!name.value) {
            return false;
        }
        var messageObj = {newName: name.value, type: "changeName"}
        conn.send("changeName|" + JSON.stringify(messageObj));
        name.value = "";
        return false;
    };

    //落座方法
    function seat(position) {
        var messageObj = {position: position,}
        conn.send("chooseRoom|" + room);
        conn.send("seat|" + JSON.stringify(messageObj));
    }

    // document.getElementById("seat").onclick = function () {
    //     if (!conn) {
    //         return false;
    //     }
    //     var messageObj = {type:"seat"}
    //     conn.send("seat|"+JSON.stringify(messageObj));
    //     return false;
    // };

    var cnt = 1;
    if (window["WebSocket"]) {
        conn = new WebSocket("ws://" + document.domain + ":8000/ws");
        conn.onclose = function (evt) {
            var item = document.createElement("div");
            item.innerHTML = "<b>Connection closed.</b>";
            appendLog(item);
        };

        conn.onmessage = function (evt) {
            var data = JSON.parse(evt.data)
            console.log(data)
            if (conn && cnt == 1) {
                var messageObj = {newName: username, type: "changeName"}
                conn.send("changeName|" + JSON.stringify(messageObj));
                cnt++;
            }
            if (data.type == "message") { //聊天消息
                var item = document.createElement("li");
                item.innerText = data.user.Name + "说：" + data.data.message;
                appendLog(item);
            } else if (data.type == "play") { //落子
                console.log("pbh", data)
                if (!data.data.hasOwnProperty("position")) {
                    return
                }
                pos = JSON.parse(data.data.position)

                if (data.data.hasOwnProperty("winOrNot")) {
                    if (data.data.winOrNot === 1) {
                        setTimeout(() => {
                            if (data.user.Type === 1) alert("白子获得了胜利！！！！")
                            else alert("黑子获得了胜利！！！！")

                            var btns = document.getElementById('qipan').getElementsByTagName("td");
                            for (btn of btns) {
                                btn.innerHTML = "";
                            }

                            conn.send("clear|xxx");
                        }, 1000)
                    }
                }

                drew(pos.x, pos.y, data.user.Type)
            } else if (data.type == "radio") { //广播消息
                var item = document.createElement("li");
                item.innerText = data.data.message;
                appendLog(item);

            } else if (data.type == "sysn") { //同步盘面信息
                sysn(data.data, data.palyerA, data.palyerB)
            }

        };

    } else {
        var item = document.createElement("div");
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
        appendLog(item);
    }


    //html基础棋盘
    //先画棋盘
    var tableobj = document.getElementById("qipan");
    for (var i = 0; i < 15; i++) {
        var trobj = document.createElement("tr");
        for (var j = 0; j < 15; j++) {
            var tdobj = document.createElement("td");
            // tdobj._i = i
            // tdobj._j = j
            trobj.appendChild(tdobj);
        }
        tableobj.appendChild(trobj);
    }
    //下棋方法
    var btn = document.getElementById('qipan').getElementsByTagName("td");
    var isClick = true;
    var player = "A";
    var nowPlayer = "A"
    for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', click, false);
    }

    function click() {
        if (!conn) {
            return false;
        }
        if (isClick) {
            isClick = false;
            //事件

            position = checkPosition(this)
            var messageObj = {type: "play", "position": {"x": position.x, "y": position.y}}
            console.log(messageObj)
            conn.send("play|" + JSON.stringify(messageObj));
            //定时器
            setTimeout(function () {
                isClick = true;
            }, 200);//一秒内不能重复点击
            this.removeEventListener('click', click, false) //移除点击绑定
        }
    }

    //检查点击点位
    function checkPosition(e) {
        var tr = e.parentNode;
        var hang = Array.from(tr.querySelectorAll('td'));
        var lie = Array.from(tr.parentNode.querySelectorAll('tr'));
        return {"x": hang.indexOf(e), "y": lie.indexOf(tr)}
    }

    //下棋
    function drew(x, y, player) {
        // console.log(x,y, player)
        // qipan = document.getElementById('qipan');
        // hang = qipan.querySelectorAll('tr')[y];
        // check = hang.querySelectorAll('td')[x];
        // check.style.backgroundImage="url(./img/play"+player+".png)";
        // changePlayer();
        // check.removeEventListener('click',click,false) //移除点击绑定
        var _img = document.createElement("img")
        if (player === 1) {
            _img.setAttribute("src", "./img/playA.png")
        } else if (player === 2) {
            _img.setAttribute("src", "./img/playB.png")
        }
        var btn = document.getElementById('qipan').getElementsByTagName("td");
        btn[y * 15 + x].appendChild(_img)
    }

    //切换当前玩家
    function changePlayer(now = null) {
        if (now) {
            nowPlayer = now;
        } else {
            nowPlayer = nowPlayer == "A" ? "B" : "A";
        }
        return nowPlayer;
    }


</script>
</html>
